<template>
  <div>
<section class="header-block">
            <div class="operation-container">
                        <el-form :model="form"  ref="ruleForm" label-width="80px">
          
                <el-row :gutter="10" class="row-container">
                    <el-col :span="5">
                            <el-form-item >
                      
    <el-button type="primary" @click="changeGroupModel()"  v-if="pagetype==='list' &&( $store.getters.getRoleTpye === 'admin' ||handelUpdateRole(2))">添加分组</el-button>
                            </el-form-item>
                           </el-col>
                </el-row>
                <el-row :gutter="10" class="row-container">
                    <el-col :span="5">
                            <el-form-item label="分类" >
                              
                    <el-cascader :options="goodsOptions"
                        v-model="form.catId"
                        style="width:200px;" 
                        >
                    </el-cascader>
                            </el-form-item>
                    </el-col>
                         <el-col :offset="2" :span="5">
                            <el-form-item label="组名" >
                                <el-input v-model="form.groupName" placeholder="属性组名"></el-input>
                              
                            </el-form-item>
                    </el-col>
                </el-row>
      <el-row :gutter="10" class="row-container">
                    <el-col :span="5">
                          <el-form-item label="车型" prop="brandId">

    <el-select v-model="form.brandId" placeholder="品牌名称" filterable @change="changeBrandId">
      <el-option  label="全部" value=""></el-option>
      
      <el-option v-for="n in brandList" :label="n.brandShortName"  :key="n.id"
              :value="n.id"></el-option>
    </el-select>
  </el-form-item>
                    </el-col>
  

         <el-col :span="4">
            <el-form>
                          <el-form-item  prop="seriesId" >
    <el-select v-model="form.seriesId" placeholder="车系名称" filterable @change="changeSeriesId">
        <el-option  label="全部" value=""></el-option>
 <el-option v-for="n in seriesList" :label="n.seriesName"  :key="n.id" :value="n.id"></el-option>
    </el-select>
  </el-form-item>
    </el-form>
            </el-col>
         <el-col :span="4">
                   <el-form>
<el-form-item prop="yearsId">
    <el-select v-model="form.years" placeholder="车型年份" >
        <el-option  label="全部" value=""></el-option>
        <div  v-for="n in yearsList"  :key="n">
 <el-option v-for="(value_c, key_c, index_c) in n" :label="key_c" :key="value_c.id"  :value="key_c" >
 </el-option>
      </div>
    </el-select>
  </el-form-item>
    </el-form>
  
                    </el-col>

                      <el-col  :span="4" >
            <el-form>
                        
       <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">搜索</el-button>
    <!-- <el-button type="primary" @click="queryGroup()">搜索</el-button> -->
  </el-form-item>
    </el-form>
    
		</el-col>
                </el-row>
                        </el-form>
            </div>
        </section>
      
  <el-table
    :data="tableData"
    :tooltip-effect="pagetype === 'item'?'dark':''"
    style="width: 100%"
     @selection-change="handleSelectionChange"
    >


    <el-table-column 
      type="selection"
      width="55" v-if="pagetype === 'item'">
    </el-table-column>


      <el-table-column
      label="序号"
      type="index"
      width="55" >
    </el-table-column>

    <el-table-column
      prop="date"
      label="属性组名称" sortable
   >
    <template scope="scope">
                            <span>{{ scope.row.groupName}}</span>
                        </template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="分类"
   >
    <template scope="scope">
      <span>   {{scope.row.firstCatName}} &nbsp; - > &nbsp;  {{scope.row.secCatName}}</span>
                        </template>

    </el-table-column>
  <el-table-column label="操作" v-if="pagetype==='list'">
                        <template scope="scope">
                                  <el-button type="primary" size="small"  @click="openSelectCar(scope.row)" v-if="$store.getters.getRoleTpye === 'admin' ||handelUpdateRole(11)">关联车型</el-button>
                            <el-button type="primary" size="small"  @click="changeGroupModel(scope.row)" v-if="$store.getters.getRoleTpye === 'admin' ||handelUpdateRole(9)">编辑</el-button>
                                         <el-button type="primary" size="small" @click="$emit('goDatil',scope.row)"  v-if="$store.getters.getRoleTpye === 'admin' ||handelUpdateRole(4)">查看</el-button>
                            <el-button type="danger" size="small" @click="delGroup(scope.row)" v-if="$store.getters.getRoleTpye === 'admin' ||handelUpdateRole(10)">删除</el-button>
                        </template>
    </el-table-column>
  </el-table>
 
 <el-dialog :title="groupEditFormPageType === 'add' ?'新增分组':'修改分组'" :visible.sync="groupModel" style="padding:20px 100px" center top="10vh" :close-on-click-modal='false'> 
        <section class="header-block">
            <div class="operation-container">
                        <el-form :model="groupEditForm" :rules="groupEditFormrules" ref="groupEditForm" label-width="7em">
                
                                         <el-row :gutter="24" class="row-container">
                    <el-col :span="24">
                            <el-form-item label="分组名称" prop="editGroupName">
                                   <el-input v-model="groupEditForm.groupName"  />
                              </el-form-item>
                    </el-col>
                </el-row>

                     <el-row :gutter="24" class="row-container">
                    <el-col :span="24">
                            <el-form-item label="分类归属" prop="cat">
                    <el-cascader :options="goodsOptions"
                        v-model="formGroupCarIdModel"
                        >
                    </el-cascader>
                            </el-form-item>
                    </el-col>
                </el-row>
<div style="text-align:center">
       <el-form-item>
              <el-button @click="groupModel=false">取消</el-button>
    <el-button type="primary" @click="submitGroupEditForm('groupEditForm')">{{groupEditFormPageType === 'add' ?'保存并添加属性':'保存'}}</el-button>
  </el-form-item>
    </div>
                        </el-form>
            </div>
        </section>
           
        </el-dialog>



<el-dialog :visible.sync="carModel" width="90%" :close-on-click-modal='false'>
<div v-loading="modelTableLoading">
  <el-row :gutter="24">



    <el-col :span="12">
              <h2 style="display:flex;align-items:center;    padding: 20px 0px;height: 40px;margin: 0;"> <el-button style="margin: 0 20px" type="info" size="mini" plain="" @click="doCancelCar(true)"  icon="el-icon-delete">清空</el-button>适配的车型
              <!-- <el-button style="margin: 0 20px" type="text" size="mini" @click="doCancelCar(false)" v-if="cancelCar.selectCancelList.length>0">解绑已选车型</el-button> -->
              </h2>

        <el-table :data="selectCarList" highlight-current-row   @selection-change="changeCancelList"
            max-height="500" height="500"
        >
        <!-- <el-table-column type="selection" width="50px" align="center" fixed="left"></el-table-column> -->
        
			  <el-table-column prop="id" label="车型ID" width="100" sortable>
			  </el-table-column>

        <el-table-column prop="seriesName" label="系列名称" width="180" sortable>
			  </el-table-column>

      <el-table-column prop="brandName" label="品牌名称" width="100" sortable>
			</el-table-column>
      <el-table-column prop="modelName" label="车型名称" width="200" sortable>
			</el-table-column>

             <el-table-column prop="years" label="年份" width="100" sortable>
			</el-table-column>

         <el-table-column prop="style" label="风格" width="160" sortable>
			</el-table-column>
              <el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="deleteRow(scope.row.id)"
          type="text" style="color:red"
          size="small" icon="el-icon-delete">
          移除
        </el-button>
      </template>
    </el-table-column>
        </el-table>
   <div class="block" align="right">
                    <br>
                    <el-pagination @current-change="handleCurrentgpChange" layout=" prev, pager, next" :page-size="20" :total="gpcount">
                    </el-pagination>
                </div>

</el-col>

 <el-col :span="12">
<div style="text-align:center;padding:20px 0;position: relative;"> 

     <el-button  @click="screenShow = true ">选择筛选条件</el-button>
        <el-button  @click="filterShow2=true">车型ID筛选</el-button>
    <span  style="position: absolute;left: 0;" v-show="modelTableShow"> <el-button @click="bindAllCar" type="primary" size="mini">关联{{count}}条结果</el-button></span>
</div>

<div v-show="modelTableShow" >
  <el-table ref="multipleTable"   :data="modelData.modelList" style="width:100%;font-size:15px" stripe border max-height="500" height="500" @selection-change="setSelected" size="small">
        <!-- <el-table-column type="selection" width="50px" align="center" fixed="left"></el-table-column> -->

        <el-table-column v-for="tableHeader in modelData.headerList" :key="tableHeader.keyId" :label="tableHeader.keyName" min-width="150px" align="center">
          <template slot-scope="scope">
            <div style='width:100%:height:100%'>
              <span >{{scope.row[tableHeader.keyId].text}}</span>
            </div>
          </template>
        </el-table-column>
                  <el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="addSelectCarByModelId(scope.row.modelId)"
          type="text" 
          size="small" icon="el-icon-plus" :disabled="scope.row.dis">
          添加关联
        </el-button>
      </template>
    </el-table-column>
      </el-table>

   <div class="block" align="right">
                    <br>
                    <el-pagination @current-change="handleCurrentChange" layout=" prev, pager, next" :page-size="20" :total="count">
                    </el-pagination>
                </div>

                </div>




</el-col>


   </el-row>
 
              </div>
              
</el-dialog>

   <el-dialog title="筛选" :visible.sync="screenShow" width="500" center top="10vh" :close-on-click-modal='false'>
            <div id="limit-switch">
                <!-- <span>筛选结果分页</span><el-switch v-model="limit" active-color="#409EFF" inactive-color="#B4BCCC"></el-switch> -->
            </div>
            <div id="screen-main" >
               
               
               <el-table :data="list" style="width:100%;" height="500" @selection-change="setKeyIds" size="mini" v-loading="isInitSelectnnnn">
                <el-table-column type="selection" width="50" align="center"></el-table-column>
                <el-table-column prop="keyName" label="属性名称" width="200" align="center"></el-table-column>
                <el-table-column label="筛选关键词" align="center" width="250">
                    <template slot-scope="scope">
                        <el-autocomplete
                            style='width:220px' 
                            placeholder="请输入筛选关键词" 
                            :value='scope.row.text'
                            @focus="inputFocus(scope.row)"
                            @input="inputed"
                           :fetch-suggestions="querySearch2"
                            size="mini">
                             <template slot-scope="props">
                                    <div class="name">{{ props.item.valueKey }}</div>
                                </template>
                                </el-autocomplete>
                    </template>
                </el-table-column>
            </el-table>


    
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="screenShow=false">取消</el-button>
              <el-button type="primary" @click="onsubmit">确定</el-button>
            </span>
        </el-dialog>
 <el-dialog title="筛选" :visible.sync="filterShow2" width="580px" center top="50px" :close-on-click-modal='false' >
            <el-table :data="list" style="width:100%;" :height="500" @selection-change="setKeyIds" size="mini" :span-method="objectSpanMethod">
                <el-table-column type="selection" width="50" align="center"></el-table-column>
                <el-table-column prop="keyName" label="属性名称" width="200" align="center"></el-table-column>
                <el-table-column :label="'车型Id ('+countId+')'" align="center" width="250">
                    <template slot-scope="scope">
                        <div :style="'width:100%;height:'+list.length*36+'px;'">
                            <el-input @input="textareaInput" type="textarea" :rows="list.length*1.7"  placeholder="请将Excel中的车型Id复制进输入框" v-model="textarea" resize="none"></el-input>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
              <el-button @click="filterShow2=false">取消</el-button>
              <el-button type="primary" @click="idSubmit">确定</el-button>
            </span>
        </el-dialog>
  </div>
</template>

<script>
import * as Api from "@/api/Api.js";
import * as RoundApi from "@/api/RoundApi.js";
import * as Config from "@/api/Config.js";
import axios from "axios";

export default {
  props: ["pagetype"],
  //pagetype 页面属性 list 列表  item 调用选择

  data() {
    var cat = (rule, value, callback) => {
      if (this.formGroupCarIdModel.length === 0) {
        callback(new Error("请选择分类"));
      }
      callback();
    };

    var editGroupName = (rule, value, callback) => {
      if ((this.groupEditForm.groupName || "") === "") {
        callback(new Error("请输入分组名"));
      }
      callback();
    };

    return {
      doCancelCar: isAll => {
        let optMessage = "";
        if (isAll) {
          optMessage = "所有该分组的";
        }
        this.$confirm(
          "此操作将解除关联" + optMessage + "车型, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(() => {
            this.modelTableLoading = true;

            let modelMove = {
              groupId: this.groupId,
              linkIds: ""
            };

            if (!isAll) {
              let moveSelectModel = [];
              this.cancelCar.selectCancelList.forEach((item, index) => {
                moveSelectModel.push(item.maintainGroupCarLink);
              });

              modelMove.linkIds = moveSelectModel.join(",");
            }

            RoundApi.delgroupLinkCar(this, modelMove).then(res => {
              if (res.retCode) {
                console.log("取消匹配车型", res);
                this.selectCar({ groupId: this.groupId });
              } else {
                this.$message("保存车型错误");
              }
              this.modelTableLoading = false;
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },

      textarea: "",
      filterShow2: false,
      countId: 0,
      selectCarIdList: [],
      pagegpIndex: 0,
      currentPage: 1,
      filterModelType: "atrr",
      gpcount: 0,
      pageIndex: 1,
      count: 0,
      cancelCar: {
        show: false,
        selectCancelList: []
      },
      groupId: "",
      selectCarList: [], //已绑定的车型
      initHaveCarList: [], //已绑定的车型 用来匹配
      screenShow: false,
      list: [],
      keyIds: [],
      modelTableShow: false,
      modelTableLoading: false, //表刷新时loadding
      modelSelectLoading: false, //匹配车型时loadding
      isInitSelectnnnn: false, //是否需要初始化默认的车型
      modelData: [], //列表对象
      carModel: false,
      //列表
      editerData: {
        show: false,
        selectedModel: [],
        model: {},
        propertyKey: {
          keyId: "",
          keyName: "",
          propertyType: ""
        }
      },

      groupEditFormPageType: "add",

      maintainList: [],
      //新增的时候临时对象
      addGroupContent: {
        catId: "",
        groupId: ""
      },
      tableData: [],
      brandList: [],
      seriesList: [],
      yearsList: [],
      //分类
      goodsOptions: [],
      // 分组表单
      groupEditForm: {
        groupName: "",
        catId: "",
        groupId: ""
      },
      //由于查询分组默认需要条件。保存最后一次筛选的条件
      groupDefaultForm: {
        catId: ["", ""],
        brandId: "",
        seriesId: "",
        years: "",
        groupName:""
      },
      //搜索表单
      form: {
        catId: ["", ""],
        brandId: "",
        seriesId: "",
        years: "",
        groupName:""
      },

      groupModel: false,
      formGroupCarIdModel: [], //分类临时对象 [] 和 groupEditForm.carId 的""  的转换

      groupEditFormrules: {
        cat: [{ validator: cat, trigger: "blur" }],
        editGroupName: [{ validator: editGroupName, trigger: "blur" }]
      }
    };
  },

  methods: {
    tablePage(currentPage) {
      this.loading = true;

      var params = new URLSearchParams();
      for (var i = 0; i < this.modelData.headerList.length; i++) {
        params.append("keyIds", this.modelData.headerList[i].keyId);
      }
      params.append("modelIds", this.modelData.modelIdList);
      params.append("currentPage", currentPage);

      axios
        .post(Config.g_service_url + "/modelfilterbyid", params)
        .then(response => {
          this.filterModelType = "id";

          if (response.data.status == 200) {
            this.count = response.data.data.total;
            this.modelData = response.data.data;
            console.log("111", response.data);
            this.initSelectnnnn();
          } else {
            this.modelData.modelList = [];
          }
          this.loading = false;
        })
        .catch(error => {});
    },
    idSubmit: function() {
      var modelData = new Object();
      modelData.headerList = this.keyIds;
      modelData.currentPage = this.currentPage;
      modelData.modelIdList = this.getModelIds();
      modelData.modelList = [];
      this.modelData = modelData;

      this.tablePage(this.currentPage);
      this.filterShow2 = false;
      this.modelTableShow = true;
    },
    getModelIds: function() {
      var texts = [],
        texts = this.textarea.split("\n");
      for (var i = 0; i < texts.length; ) {
        var id = 0;
        try {
          id = Number.parseInt(texts[i].trim());
        } catch (error) {}
        if (Number.isNaN(id)) {
          texts.splice(i, 1);
        } else {
          i++;
        }
      }
      return texts;
    },
    textareaInput: function() {
      var texts = [],
        texts = this.getModelIds();
      this.countId = texts.length;
    },
    objectSpanMethod: function({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 2) {
        if (rowIndex === 0) {
          return {
            rowspan: this.list.length,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    bindAllCar() {
      if (
        !this.modelData.modelIdList ||
        this.modelData.modelIdList.length === 0
      ) {
        return;
      }
      this.$confirm("此操作绑定上所有筛选出来的车型, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.modelTableLoading = true;

          let modelAdd = {
            groupId: this.groupId,
            tempId: this.modelData.tempId //车型ID字符串 逗号隔开
          };
          RoundApi.groupLinkCarByTemp(this, modelAdd).then(res => {
            this.modelTableLoading = false;

            if (res.retCode) {
              console.log("匹配车型", res);
              this.$message("关联成功");
              this.selectCar({ groupId: this.groupId });
              this.initSelectnnnn();
            } else {
              this.$message("关联失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消绑定"
          });
        });
    },

    filterInit: function() {
      axios
        .post(Config.g_service_url + "/modelfilterinit")
        .then(response => {
          var list = response.data.data;
          for (var i = 0; i < list.length; i++) list[i].text = "";
          this.list = list;
        })
        .catch(error => {});
    },

    setKeyIds: function(val) {
      this.keyIds = val;
    },
    inputFocus: function(row) {
      this.inputRow = row;
    },
    inputed: function(val) {
      this.inputRow.text = val;
    },

    querySearch: function(queryString, callback) {
      axios
        .post(
          Config.g_service_url + "/lenovo",
          "keyId=" + this.inputRow.keyId + "&text=" + queryString
        )
        .then(response => {
          var rs = response.data.data;
          var restaurants = [];
          for (var i = 0; i < rs.length; i++) {
            restaurants.push({ valueKey: rs[i].text, value: rs[i].text });
          }
          //var restaurants = this.restaurants;
          var results = queryString
            ? restaurants.filter(this.createFilter(queryString))
            : restaurants;
          // 调用 callback 返回建议列表的数据
          callback(results);
        })
        .catch();
    },
    querySearch2: function(queryString, callback) {
      var params = new URLSearchParams();
      params.append("keyId", this.inputRow.keyId);
      params.append("text", queryString);
      for (var i = 0; i < this.list.length; i++) {
        var text = this.list[i].text.trim();
        if (text != "") params.append(this.list[i].keyId, text);
      }
      axios
        .post(Config.g_service_url + "/property/autocomplete", params)
        .then(response => {
          var restaurants = response.data.data;
          //var restaurants = this.restaurants;
          //var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
          //调用 callback 返回建议列表的数据
          callback(restaurants);
        })
        .catch();
    },
    createFilter: function(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },

    changeCancelList(val) {
      this.cancelCar.selectCancelList = val;
    },

    // 移除
    deleteRow(carIds) {
      this.$confirm("此操作将永久移除关联该车型, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let modelMove = {
            groupId: this.groupId,
            carIds: carIds
          };
          RoundApi.delgroupLinkCar(this, modelMove).then(res => {
            if (res.retCode) {
              this.$message("移除成功");
              this.selectCar({ groupId: this.groupId });
            } else {
              count++;
              this.$message("移除失败");
              this.modelTableLoading = false;
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 添加关联
    addSelectCarByModelId(modelId) {
      let modelAdd = {
        groupId: this.groupId,
        carIds: modelId //车型ID字符串 逗号隔开
      };
      RoundApi.groupLinkCar(this, modelAdd).then(res => {
        if (res.retCode) {
          console.log("匹配车型", res);
          this.$message("添加关联车型成功");

          this.selectCar({ groupId: this.groupId });
        } else {
          this.$message("添加关联车型错误");
        }
      });
    },
    //匹配车型
    saveSelectCar() {
      let count = 0;
      this.modelTableLoading = true;
      let addSelectModel = [];
      let moveSelectModel = [];

      this.editerData.selectedModel.forEach((item, caridIndex) => {
        let keyModel = false;
        //选择的
        this.initHaveCarList.forEach((model, modelIndex) => {
          //已有的
          if (item.modelId === model.id) keyModel = true;
        });
        if (!keyModel) {
          addSelectModel.push(item.modelId);
        }
      });

      // this.initHaveCarList.forEach((item, caridIndex) => {
      //   let keyModel = false;
      //   //已有的
      //   this.editerData.selectedModel.forEach((model, modelIndex) => {
      //     //选择的
      //     if (item.id === model.modelId) keyModel = true;
      //   });
      //   if (!keyModel) {
      //     moveSelectModel.push(item.maintainGroupCarLink);
      //   }
      // });

      if (addSelectModel.length > 0) {
        let modelAdd = {
          groupId: this.groupId,
          carIds: addSelectModel.join(",") //车型ID字符串 逗号隔开
        };
        RoundApi.groupLinkCar(this, modelAdd).then(res => {
          if (res.retCode) {
            console.log("匹配车型", res);

            // if (moveSelectModel.length > 0) {
            //   let modelMove = {
            //     groupId: this.groupId,
            //     linkIds: moveSelectModel.join(",")
            //   };
            //   RoundApi.delgroupLinkCar(this, modelMove).then(res => {
            //     if (res.retCode) {
            //       console.log("取消匹配车型", res);
            //       this.selectCar({ groupId: this.groupId });
            //     } else {
            //       count++;
            //       this.$message("保存车型错误");
            //       this.modelTableLoading = false;
            //     }
            //   });
            // } else {
            //   this.selectCar({ groupId: this.groupId });
            // }
            this.selectCar({ groupId: this.groupId });
          } else {
            count++;
            this.$message("保存车型错误");
          }
        });
      }
      // else {
      //   if (moveSelectModel.length > 0) {
      //     let modelMove = {
      //       groupId: this.groupId,
      //       linkIds: moveSelectModel.join(",")
      //     };
      //     RoundApi.delgroupLinkCar(this, modelMove).then(res => {
      //       if (res.retCode) {
      //         console.log("取消匹配车型", res);
      //         this.selectCar({ groupId: this.groupId });
      //       } else {
      //         count++;
      //         this.$message("保存车型错误");
      //         this.modelTableLoading = false;
      //       }
      //     });
      //   } else {
      //     this.selectCar({ groupId: this.groupId });
      //   }
      // }
      if (count == 0) {
        this.$message("保存成功");
      }
      this.modelTableLoading = false;
    },

    openSelectCar(row) {
      this.modelData = [];
      this.list = [];
      this.modelTableLoading = false;
      this.modelTableShow = false;
      this.textarea = "";
      this.carModel = !this.carModel;
      this.selectCar(row);
      this.screenInit();
    },

    handleCurrentgpChange(val) {
      console.log(val);
      this.pagegpIndex = parseInt(val) - 1;
      this.selectCar({ groupId: this.groupId });
    },

    selectCar(row) {
      console.log(row);
      this.modelTableLoading = true;
      this.isInitSelectnnnn = true;
      this.groupId = row.groupId;
      RoundApi.querySelectCar(this, {
        groupId: row.groupId,
        page: this.pagegpIndex,
        pageSize: 20
      })
        .then(res => {
          if (res.retCode) {
            console.log("查询已选的车列表", res);
            this.selectCarList = res.data.carList;
            this.selectCarIdList = res.data.carIdList;
            this.gpcount = res.data.page.total;
          } else {
            this.modelTableLoading = false;
            this.isInitSelectnnnn = false;
            this.$alert("查询已绑定车型错误");
          }
        })
        .then(res => {
          this.initSelectnnnn();
        });
    },
    initSelectnnnn() {
      // this.$refs.multipleTable.clearSelection();

      console.log("设置");

      this.editerData.selectedModel = [];
      this.initHaveCarList = [];

      if (!this.modelData.modelList) {
        this.modelTableLoading = false;
        this.isInitSelectnnnn = false;

        return;
      }

      let idArr = this.modelData.modelIdList.slice(
        (this.pageIndex - 1) * 20,
        this.modelData.modelIdList.length < this.pageIndex * 20
          ? this.modelData.modelIdList.length
          : this.pageIndex * 20
      );

      let pagegpIndex = this.pagegpIndex + 1;
      let selectIdArr = this.selectCarIdList;

      idArr.forEach((model, modelIndex) => {
        let count = 0;
        let opt = { dis: false };

        selectIdArr.forEach((carid, caridIndex) => {
          parseInt(carid) === model ? count++ : "";
        });
        count > 0 ? (opt.dis = true) : "";

        this.modelData.modelList[modelIndex].dis === undefined
          ? Object.assign(this.modelData.modelList[modelIndex], opt)
          : (this.modelData.modelList[modelIndex].dis = opt.dis);
      });

      this.$refs.multipleTable.doLayout();
      this.modelTableLoading = false;
      this.isInitSelectnnnn = false;
    },

    handleCurrentChange(val) {
      console.log(this.filterModelType);
      if (this.filterModelType === "atrr") {
        this.pageIndex = val;
        this.onsubmit();
      } else {
        this.currentPage = val;
        this.idSubmit();
      }
    },

    onsubmit: function() {
      var params = new URLSearchParams();
      for (var i = 0; i < this.keyIds.length; i++) {
        params.append("keyIds", this.keyIds[i].keyId);
      }
      params.append("currentPage", this.pageIndex);
      let count = true;
      for (var i = 0; i < this.list.length; i++) {
        if (this.list[i].text.trim() != "") {
          count = false;
          params.append(this.list[i].keyId, this.list[i].text);
        }
      }

      if (count) {
        this.$message("请填写至少一项筛选条件");
        return;
      }
      this.modelTableShow = true;

      this.modelTableLoading = true;

      this.isInitSelectnnnn = true;

      var CancelToken = axios.CancelToken;
      var source = CancelToken.source();
      axios
        .post(Config.g_service_url + "/modelfilter", params)
        .then(
          function(response) {
            this.filterModelType = "atrr";
            console.log("筛选之后", response.data);
            console.log(response.data.status);
            if (response.data.status === 200) {
              this.count = response.data.data.total;
              this.modelData = response.data.data;
              this.initSelectnnnn();
            } else {
              console.log("不等于200");
              this.$message(response.data.message);
              this.modelTableLoading = false;
              this.modelTableShow = false;
              this.isInitSelectnnnn = false;
            }
          }.bind(this)
        )
        .catch(error => {
          this.modelTableLoading = false;
          this.modelTableShow = false;
          this.isInitSelectnnnn = false;
        });

      this.screenShow = false;
    },
    setSelected: function(val) {
      console.log(val);
      this.editerData.selectedModel = val;
    },
    //初始化筛选字段
    screenInit: function() {
      if (this.list.length > 0) {
        this.screenShow = !this.screenShow;
      } else {
        RoundApi.initFilterList().then(res => {
          if (res.retCode) {
            console.log("初始化", res);
            this.list = res.data;
          }
        });
      }
      // console.log(this.screenShow);
    },

    setKeyIds: function(val) {
      this.keyIds = val;
    },
    handleSelectionChange(val) {
      this.maintainList = val;
    },

    getMaintainList() {
      return this.maintainList;
    },

    getCatTree() {
      Api.queryCatTree(this).then(res => {
        if (res.retCode) {
          this.goodsOptions = res.data;
          this.goodsOptions.unshift({
            label: "全部",
            value: "",
            children: [{ label: "全部", value: "" }]
          });
          console.log("分类树", this.goodsOptions);
        }
      });
    },
    //获取品牌列表
    getBrandList() {
      RoundApi.getBrandList().then(res => {
        if (res.retCode) {
          this.brandList = res.data;
        }
      });
    },

    //选择品牌  通过BrandID获取车系列表
    changeBrandId(e) {
      if (this.form.brandId === "") {
        this.form.seriesId = "";
        this.form.years = "";
        this.seriesList = [];
        this.yearsList = [];
        return;
      }

      RoundApi.getSeriesList(this.form.brandId).then(res => {
        if (res.retCode) {
          this.seriesList = res.data;
        }
      });
    },
    //通过品牌、车系ID 获取年份列表
    changeSeriesId() {
      if (this.form.seriesId === "") {
        this.form.years = "";
        this.yearsList = [];
        return;
      }
      RoundApi.getYearsList(this.form.brandId, this.form.seriesId).then(res => {
        if (res.retCode) {
          this.yearsList = res.data;
        }
      });
    },
    //f分组 修改  新增
    editGroupEditForm() {
      this.groupEditForm.firstCatId = this.formGroupCarIdModel[0];
      this.groupEditForm.secCatId = this.formGroupCarIdModel[1];

      if (this.groupEditFormPageType === "edit") {
        console.log(this.groupEditForm);

        //  通过表单验证后   此处下标1 必定取得到
        RoundApi.MaintainUpdate(this, this.groupEditForm).then(res => {
          if (res.retCode) {
            console.log("修改分组", res);
            // 要进行刷新列表  要把第一次筛选的数据保存起来 通过列表再查一次
            this.queryGroup(true);
          }
        });
      } else if (this.groupEditFormPageType === "add") {
        RoundApi.MaintainAdd(this, this.groupEditForm).then(res => {
          if (res.retCode) {
            console.log("添加分组", res);
            this.addGroupContent = res.data;
            this.queryGroup(true);
            this.$emit("goDatil", this.addGroupContent);
          }
        });
      } else {
        console.log("错误，页面无类型");
        return;
      }
      this.groupModel = !this.groupModel;
    },

    // 分组 打开弹窗
    changeGroupModel(row) {
      this.formGroupCarIdModel = [];
      this.groupModel = !this.groupModel;
      if (row) {
        let groupEditForm = {};
        Object.assign(groupEditForm, row);
        this.groupEditForm = groupEditForm;
        this.formGroupCarIdModel[0] = row.firstCartId;
        this.formGroupCarIdModel[1] = row.secCartId;
        console.log(this.formGroupCarIdModel);
        this.groupEditFormPageType = "edit";
      } else {
        this.groupEditForm = {
          groupName: "",
          catId: "",
          groupId: ""
        };
        this.groupEditFormPageType = "add";
      }
    },

    //搜车型表单单验证
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let groupDefaultForm = {};
          Object.assign(groupDefaultForm, this.form);
          this.groupDefaultForm = groupDefaultForm;
          console.log("设置", this.groupDefaultForm);

          this.queryGroup();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submitGroupEditForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.editGroupEditForm();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    queryGroup(row) {
      let model = {};
      if (!row) {
        console.log("正常");

        Object.assign(model, this.form);
      } else {
        console.log("查询刚刚保存的表单信息");

        Object.assign(model, this.groupDefaultForm);
      }
      model.secCatId = model.catId[1];
      model.firstCatId = model.catId[0];
      console.log(222, model);

      RoundApi.getMaintainList(this, model).then(res => {
        if (res.retCode) {
          console.log("列表", res);

          this.tableData = res.data;
        }
      });
    },

    delGroup(row) {
      this.$confirm("此操作将永久删除该分组, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          RoundApi.delGroup(this, { groupId: row.groupId }).then(res => {
            console.log(res);
            if (res.retCode) {
              this.$message("删除分组成功");
              this.queryGroup(true);
            } else {
              this.$alert("删除分组失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  mounted() {
    this.getCatTree();
    this.getBrandList();
    this.queryGroup();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-dialog__header {
  height: 0;
}
</style>
